<template>
	<div class="order">
		<!-- 订单号 收货地址 电话 发货单号 总价 是否付款 下单时间 操作 -->
			<div class="box_top">
				<h3>我的订单详情</h3>
				<el-button type="primary" style="height: 30px;margin-top: 0.5%;margin-left: 1%;float: right;" @click="btn()">查询</el-button>
				<el-date-picker v-model="date1" style="height: 65px;margin-top: 0.5%;float: right;" placeholder="订单起始时间"></el-date-picker>
				<el-date-picker v-model="date2" style="height: 65px;margin-top: 0.5%;float: right;" placeholder="订单结束时间"></el-date-picker>
				<el-switch active-text="已付款" inactive-text="未付款" v-model="value1" inactive-color="#ff4949" active-color="#13ce66"></el-switch>
				<hr style="position: absolute;top: 50px;border-color: gainsboro;width: 100%;" />
			</div>
			<div class="box_bottom">
				<el-table :data="groupList">
					<el-table-column label="订单号" width="150" prop="ordid"></el-table-column>
					<el-table-column prop="addr" label="收货地址" />
					<el-table-column prop="phone" label="电话" />
					<el-table-column label="发货单号"></el-table-column>
					<el-table-column label="总价" prop="amount"></el-table-column>
					<el-table-column label="是否付款" prop="ispay">
						<template #default="scope">
							{{filterIsPay(scope.row)}}
						</template>
					</el-table-column>
					<el-table-column prop="tcreate" label="下单时间" >
						<template #default="scope">
							{{filterTime(scope.row)}}
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default="scope">
							<el-popover trigger="click" placement="left" width="600px">
								<p>订单号:{{scope.row.ordid}}</p>
								<el-table :data="newlist">
									<el-table-column label="图片" width="200px">
										<template #default="scope">
											<img :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" style="width: 50%;margin-left: 5%;"/>
										</template>
									</el-table-column>
									<el-table-column label="商品名称" prop="name"></el-table-column>
									<el-table-column label="商品价钱" prop="price"></el-table-column>
									<el-table-column label="商品数量" prop="num"></el-table-column>
									<el-table-column label="小计">
										<template #default="scope">
											{{ scope.row.price * scope.row.num }}
										</template>
									</el-table-column>
								</el-table>
								<template #reference>
									<el-button @click="more(scope.row)">明细</el-button>
								</template>
							</el-popover>
						</template>
						
					</el-table-column>
				</el-table>
				<el-button type="danger" style="margin-left: 50%;margin-top: 1%;" @click="add()" id="anniu">展开更多</el-button>
			</div>
	</div>
</template>

<script>
	import { Search } from '@element-plus/icons-vue';
	// 引入token
	import instance from '../../../ajax/index.js';
	export default{
		name : 'Order',
		data(){
			return {
				list : [],
				newlist : [],
				groupList : [],
				date1 : '2022-01-30',
				date2 : '2021-12-31',
				value1 : false,
				sum : 0
			}
		},
		computed:{
			filterIsPay(val){
				return (val)=>{
					return val.ispay == 0 ? '未付款' : '已付款';
				}
			},
			filterTime(val){
				return (val)=>{
					let date = new Date( val.tcreate );
					let y = date.getFullYear();
					let d = date.getMonth()+1;
					let m = date.getDate();
					return `${y}-${d}-${m}`;
				}
			}
		},
		methods:{
			add(){
				let obj = {};
				this.sum++;
				instance.get( 'http://127.0.0.1:8093/api/fore/ord/findOrdLineByPage/'+this.sum+'/5' ).then( (res)=>{
					console.log(res.data.data.orders);
					for( let i in res.data.data.orders ){
						this.list.push( res.data.data.orders[i] );
						// this.btn();
						
					}
					// this.list = res.data.data.orders;
					this.sum++;
				} ).catch( (error)=>{
					console.log(error);
				} )
			},
			more( val ){
				instance.get( 'http://127.0.0.1:8093/api/adm/ord/findItemInfoByOrdid/'+val.ordid ).then( (res)=>{
					console.log(res);
					this.newlist = res.data.data;
				} ).catch( (error)=>{
					console.log(error);
				} );
			},
			btn(){
				// console.log(this.value1);
				// date1是起始时间
				// tcreate
				// console.log(new Date(this.date1).getTime());
				// console.log(new Date(this.date2).getTime());
				// console.log( new Date(this.date1).getTime() < new Date(this.date2).getTime() );
				this.groupList = [];
				if( new Date(this.date1).getTime() > new Date(this.date2).getTime() ){
					if( this.value1 ){
						for( let i in this.list ){
							if( this.list[i].ispay == 1 && this.list[i].tcreate <= new Date(this.date1).getTime() && this.list[i].tcreate >= new Date(this.date2).getTime() ){
								this.groupList.push( this.list[i] );
							}
						}
					}else{
						for( let i in this.list ){
							if( this.list[i].ispay == 0 && this.list[i].tcreate <= new Date(this.date1).getTime() && this.list[i].tcreate >= new Date(this.date2).getTime() ){
								this.groupList.push( this.list[i] );
							}
						}
					}
				}else{
					return false;
				}
				// console.log(this.groupList);
			}
		},
		created(){
			// http://127.0.0.1:8093/api/fore/ord/findOrdLineByPage/0/5
			instance.get( 'http://127.0.0.1:8093/api/fore/ord/findOrdLineByPage/0/5' ).then( (res)=>{
				// console.log(res.data.data);
				this.list = res.data.data.orders;
				// console.log(this.list);
				this.groupList = res.data.data.orders;
			} ).catch( (error)=>{
				console.log(error);
			} )
		}
	}
</script>

<style scoped>
	.el-table{
		width: 95%;
		margin-left: 2.5%;
		border: 1px solid gainsboro;
	}
	.box_top{
		width: 92%;
		height: 65px;
		position: absolute;
		top: 80px;
		left: 70px;
		z-index: 10;
		float: left;
	}
	.box_bottom{
		width: 100%;
		position: absolute;
		top: 150px;
	}
	.box_top h3{
		display: flex;
		float: left;
	}
	.el-switch{
		width: 150px;
		height: 65px;
		float: right;
	}
</style>
